<template>
  <div class="w">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">设置</span>
    </div>
    <div class="info">
      <div class="info_card">
        <div class="card_item" @click="goNext('avatar')">
          <el-image :src="userInfo.avatar" fit="cover"></el-image>
          <span>头像</span>
          <i class="iconfont icon-jinrujiantou"></i>
        </div>
        <div class="card_item" @click="goNext('name')">
          <span>昵称</span>
          <i class="iconfont icon-jinrujiantou"></i>
        </div>
        <div class="card_item" @click="goNext('address')">
          <span>收货地址</span>
          <i class="iconfont icon-jinrujiantou"></i>
        </div>
      </div>
      <div class="info_card">
        <div class="card_item" @click="goNext('password')">
          <span>修改密码</span>
          <i class="iconfont icon-jinrujiantou"></i>
        </div>
        <div class="card_item" @click="goNext('phone')">
          <span>修改手机号</span>
          <i class="iconfont icon-jinrujiantou"></i>
        </div>
      </div>
      <div class="button" @click="logout">
        <el-button>退出登录</el-button>
      </div>
      <div class="avatar" v-if="avatarShow">
        <div class="avatar_card">
          <div class="card_item">
            <el-upload
              class="upload-demo"
              action="http://localhost:8080/school/image/upload"
              :on-success="uploadSuccess"
              :on-remove="deleteImage"
              :on-progress="changeImage"
              :before-upload="beforeUpload"
              list-type="picture"
              :show-file-list="false"
              >从本地文件获取
            </el-upload>
          </div>
          <div class="card_item" @click="del">
            <span>取消</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarShow: false,
      info: [],
      userInfo: {},
    };
  },

  created() {
    this.info = JSON.parse(window.localStorage.getItem('userInfo'));
  },

  mounted() {
    setTimeout(() => {
      this.getUserInfo();
    }, 10);
  },

  methods: {
    beforeUpload(file) {
      console.log(file);
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);

      const whiteList = ['jpg', 'png'];

      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件只能是 jpg、png 格式');
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isLt2M) {
        return this.$message.error('上传文件大小不能超过 3MB，请选择其他图片');
      }
    },
    back() {
      this.$router.push('/my');
    },
    logout() {
      window.localStorage.removeItem('userInfo');
      window.sessionStorage.removeItem('token');
      this.$router.push('/');
    },
    goNext(url) {
      if (url == 'avatar') {
        this.avatarShow = true;
      }
      if (url == 'name') {
        this.$router.push({ path: '/edit', query: { url: url, id: this.userInfo.id } });
      }
      if (url == 'address') {
        this.$router.push('/address');
      }
      if (url == 'password') {
        this.$router.push('/lose');
      }
      if (url == 'phone') {
        this.$router.push({ path: '/edit', query: { url: url, id: this.userInfo.id } });
      }
    },
    del() {
      this.avatarShow = false;
    },
    //更换图片时先进行该方法删除原有图片
    async changeImage() {
      const { data: res } = await this.$http.delete('image/deleteImage/' + this.userInfo.avatar);
      if (res.code == 1) {
        const { data: ress } = await this.$http.put('user/updateUserPassword', this.userInfo);
        if (ress.code == 1) {
          this.avatarShow = false;
          return this.$message.success('照片更换成功');
        }
      } else {
        return this.$message.error('照片更换失败');
      }
    },
    //接受上传成功的返回的图片名称
    uploadSuccess(reponse) {
      this.userInfo.avatar = reponse.data;
    },
    //取消上传后删除图片
    async deleteImage() {
      const { data: res } = await this.$http.delete('image/deleteImage/' + this.userInfo.avatar);
      if (res.code == 1) {
        return this.$message.success(res.data);
      } else {
        return this.$message.error(res.msg);
      }
    },
    async getUserInfo() {
      const { data: res } = await this.$http.get('user/getById/' + this.info.id);
      if (res.code == 1) {
        this.userInfo = res.data;
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  background-color: #f3f3f3;
  .header {
    background-color: #fff;
    height: 50px;
    color: #0a0a0a;
    text-align: center;
    position: relative;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 50px;
      left: 10px;
    }
    .title {
      font-size: 20px;
      line-height: 50px;
    }
  }
  .info {
    padding: 15px;
    height: calc(100vh - 100px);
    position: relative;
    .info_card {
      height: auto;
      background-color: #ffffff;
      border-radius: 8px;
      padding-left: 15px;
      padding-right: 15px;
      margin-bottom: 15px;
      div:last-child {
        border: none;
      }
      .card_item {
        position: relative;
        height: 60px;
        border-bottom: 2px solid #ebebeb;
        line-height: 60px;
        :deep(.el-image) {
          border-radius: 50px;
          width: 45px;
          height: 45px;
          position: absolute;
          right: 25px;
          top: 8px;
        }
        .iconfont {
          color: #ffc200;
          line-height: 60px;
          margin-right: 10px;
        }
        .icon-jinrujiantou {
          color: #000000;
          float: right;
        }
      }
    }
    .button {
      :deep(.el-button) {
        background-color: #fff;
        height: 50px;
        width: 100%;
        border-radius: 8px;
        font-size: 16px;
      }
    }
    .avatar {
      position: absolute;
      bottom: 0;
      width: 360px;
      .avatar_card {
        height: auto;
        background-color: #ffffff;
        border-radius: 8px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 15px;

        div:last-child {
          border: none;
        }
        .card_item {
          height: 60px;
          border-bottom: 2px solid #ebebeb;
          line-height: 60px;
          text-align: center;
        }
      }
    }
  }
}
</style>